<template>
	<view class="main-contain">
		<!-- 标签页 -->
		<view>
			<u-sticky bgColor="#2C57F6">
				<u-tabs :list="stickyList" :current="currentTab" :itemStyle="{height:'70px',width:'75px'}"
					:activeStyle="{color:'#FFFFFF'}" @click="handleTabClick" :inactiveStyle="{color:'#000000'}"
					lineWidth="30px"></u-tabs>
			</u-sticky>
		</view>

		<view>
			<u-subsection fontSize="16" :list="subsectionList" mode="subsection" :current="subsectIndex"
				@change="subChange" bgColor="#2C57F6"></u-subsection>
		</view>

		<!-- 社区分享列表 -->
		<view class="community-contain" v-for="(item,index) in shareList" :key="index">
			<view class="share-info" :class="{'self-content': isSelfContent(item)}">
				<!-- 分享人头像 -->
				<view class="share-avatar">
					<u-avatar :src="item.parentUrl" size="90"></u-avatar>
				</view>
				<!-- 分享人信息 -->
				<view class="share-main">
					<view class="parent-name" :class="{'right-align': isSelfContent(item)}">
						{{item.stuLink}}
					</view>
					<view class="child-info" :class="{'right-align': isSelfContent(item)}">
						<span class="label" v-if="item.stuName">{{item.stuName}}</span>
						<span class="label" v-if="item.stuName" style="color: darkgrey;">|</span>
						<span class="info-style"> {{item.claDescribe}}</span>
					</view>
				</view>
				<!-- 当前动态状态 -->
				<view class="share-status" @click="openSheet()" v-if="!isSelfContent(item)">
					...
				</view>


			</view>
			<view class="share-content" :class="{'self-content': isSelfContent(item)}">
				<view class="content">
					<!-- 动态文字 -->
					<view class="condition-info">
						{{item.mesContent}}
					</view>
					<!-- 动态图片 -->
					<view class="content-img">
						<u--image :showLoading="true" :src="item.mesPath" width="100%" height="200rpx" radius="18px"
							@click="previewImage(item.mesPath)"></u--image>
					</view>
				</view>
				<view class="three-link">
					<view class="link-share" @click="reViewTheComment(item)">
						<view class="link-icon">
							<u-icon :name="item.textShow?'chat-fill':'chat'" :color="item.textShow?'#2C57F6':'black'"
								size="26px"></u-icon>
						</view>
						<view class="link-icon-num">
							评论
						</view>

					</view>
					<view class="link-comments" @click="checkComment(item)">
						<view class="link-icon">
							<u-icon :name="item.isCommentActive?'more-circle-fill':'more-circle'"
								:color="item.isCommentActive?'#2C57F6':'black'" size="26px"></u-icon>
						</view>
						<view class="link-icon-num">
							{{formateNumber(item.commentCount||0)}}
						</view>

					</view>
					<view class="link-zan" @click="handleLike(item)">
						<view class="link-icon">
							<u-icon :name="IntToBoolean(item.userLikeStatus)?'thumb-up-fill' :'thumb-up'"
								:color="IntToBoolean(item.userLikeStatus)?'red' :'black'" size="32px"></u-icon>

						</view>
						<view class="link-icon-num">
							{{formateNumber(item.likeCount||0)}}
						</view>

					</view>
				</view>
				<!-- 评论区 -->
				<view v-if="item.textShow">
					<u--textarea v-model="textarea" placeholder="请输入内容"></u--textarea>
					<u-button type="primary" @click="handleComment(item)">评论</u-button>
				</view>
				<view class="comments" v-show="item.isCommentActive" v-for="(comItem,comIndex) in item.CommentList"
					:key="comIndex">
					<view class="comments-list">
						<view class="comments-avater">
							<u-avatar :src="comItem.userAvatar" size="50"></u-avatar>
						</view>
						<view class="comments-info">
							<view class="comments-name">
								{{comItem.userName}}
							</view>
							<view class="comments-mes">
								{{comItem.comContent}}

							</view>

						</view>


					</view>
				</view>
			</view>
		</view>
		<!-- 操作菜单 -->
		<u-action-sheet :show="sheetShow" @close="sheetShow = false" @select="select" :actions="sheetActions"
			cancelText="取消">
		</u-action-sheet>
		<!-- 底部导航栏 -->
		<!-- <tabBar :page="page"></tabBar> -->
		<!-- 悬浮球组件 -->
		<view class="floating-button" @click="navigateToTargetPage">
			<u-icon name="plus" size="36px" color="#FFFFFF"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import {
		getCommunityInfo,
		selectCommentsBymesId,
		insertCommentByMesId,userLikeCommunityCommon
	} from '@/api/community.js'
	export default {
		data() {
			return {

				currentTab:3,
				user: {
					parentId: 1003,
					campusId: 1,
					teacherId: 0,
				},
				textarea: '',
				subsectionList: ['家长社区', '老师社区'],
				subsectIndex: 0,
				stickyList: [{
						name: '校区作品'
					},
					{
						name: '投票'
					},
					{
						name: '艺术家相册'
					},
					{
						name: '社区'
					},
				],
				shareList: [],
				sheetShow: false,
				sheetActions: [{
						name: '举报',
					},
					{
						name: '隐藏',
					},
					{
						name: '拉黑',
					},
				],
			}
		},
		created() {
			
			this.initCommunity();

		},
		onShow() {
			this.initCommunity();
			this.currentTab = this.activeTab;
		},
		computed: {
			...mapGetters(['getActiveTab']),
		
			// 简化访问
			activeTab() {
				return this.getActiveTab;
			}
		},
		methods: {
			...mapActions(['updateActiveTab']),
			//用户发布评论
			handleComment(item) {
				console.log(item);
				console.log("用户评论", this.textarea);
				const data = {
					mesId: item.mesId,
					parentId: this.user.parentId || 0,
					teacherId: this.user.teacherId || 0,
					comContent: this.textarea
				}
				insertCommentByMesId(data).then(res => {
					item.isCommentActive = !item.isCommentActive;
					this.checkComment(item);
					item.commentCount++;
					this.textarea = '';
					uni.showToast({
						title: '评论成功',
						icon: 'success',
						duration: 2000,
						position: 'bottom'
					});
				}).catch(err => {
					console.log("发布评论失败");
				})
			},
			//评论动态
			reViewTheComment(item) {
				item.textShow = !item.textShow;
			},
			//查看评论区
			checkComment(item) {
				item.isCommentActive = !item.isCommentActive;
				console.log("值为", item.isCommentActive);
				if (item.isCommentActive) {
					const data = {
						mesId: item.mesId,
					}
					selectCommentsBymesId(data).then(res => {
							this.$set(item, 'CommentList', res.data.comments);
						})
						.catch(err => {
							console.log("用户查询评论失败");
						})
					console.log("查看评论");
				}
			},
			//根据用户类型判断当前内容是否是自己发布的
			isSelfContent(item) {
				if (this.user.parentId !== 0) {
					return item.parentId === this.user.parentId;
				} else {
					return item.parentId === this.user.teacherId;
				}
			},
			//转换成布尔值
			IntToBoolean(val) {
				if (val == 1) {
					return true;
				} else {
					return false;
				}
			},
			subChange(index) {
				console.log("切换社区");
				this.subsectIndex = index;
				this.initCommunity();

			},
			//社区的初始化
			initCommunity() {
				console.log("社区 的初始化");
				const data = {
					campusId: this.user.campusId,
					parentId: this.user.parentId || 0,
					teacherId: this.teacherId || 0,
					subIndex: this.subsectIndex,
				}
				getCommunityInfo(data).then(res => {
					const communityInfoWithStatus = res.data.communityInfo.map(item => {
						return {
							...item,
							isCommentActive: false,
							textShow: false,
						};
					});
					this.shareList = communityInfoWithStatus;
					console.log(this.shareList);
				}).catch(err => {
					console.log("查询社区信息失败");
				})
			},
			navigateToTargetPage() {
				uni.navigateTo({
					url: "/pages/publish-dynamic/publish-dynamic"
				});
			},
			// 更新当前Tab状态
			updateCurrentTab() {
				const app = getApp();
				if (this.currentTab !== app.globalData.currentTab) {
					this.currentTab = app.globalData.currentTab;
				}
			},
			openSheet() {
				this.sheetShow = true
			},
			select(e) {
				console.log('select', e);
			},
			//图片预览
			previewImage(imgUrl) {
				const allImages = this.shareList.map(item => item.mesPath);
				uni.previewImage({
					current: imgUrl,
					urls: allImages
				});
			},

			//将评论数，点赞数转换成对应的格式（如15080转成1.5万）
			formateNumber(val) {
				const number = parseInt(val, 10);
				if (number >= 10000) {
					return (number / 10000).toFixed(1) + '万';
				}
				return number;
			},
			// 标签跳转方法
			handleTabClick(e) {
				const tabIndex = e.index;
				this.updateActiveTab(tabIndex); // 更新 Vuex 状态
			
				if (tabIndex === 2) { // 点击"投票"标签
					console.log("跳转艺术家相册");
					uni.navigateTo({
						url: '/pages/art-album/art-album'
					});
				} else if (tabIndex === 0) {
					console.log("跳转校区作品");
					uni.switchTab({
						url: '/pages/art-gallery/art-gallery'
					});
				}else if(tabIndex === 1){
					console.log("跳转投票");
					uni.navigateTo({
						url: '/pages/voting event/voting event'
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main-contain {
		box-sizing: border-box;
		padding-bottom: 120px;

		.community-contain {
			margin-bottom: 100rpx;
			width: 100vw;

			.share-info {
				width: 100%;
				height: 200rpx;
				display: inline-flex;

				&.self-content {
					flex-direction: row-reverse;
				}

				.share-avatar {
					width: 25%;
					height: 100%;

					display: flex;
					justify-content: center;
					align-items: center;
				}

				.share-main {
					width: 60%;
					height: 100%;
					box-sizing: border-box;
					padding: 5%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.parent-name {
						font-size: 18px;
						overflow: hidden;
						font-weight: bold;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.parent-name.right-align {
						text-align: right;
					}

					.child-info {

						.label {
							margin-right: 10px;
						}

						.info-style {
							font-size: 14px;
							color: #242424
						}
					}

					.child-info.right-align {
						text-align: right;
					}
				}

				.share-status {
					width: 15%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30px;
					color: #101010;
				}
			}

			.share-content {
				width: 100%;
				box-sizing: border-box;
				padding: 0 50rpx;

				&.self-content {

					.content,
					.comments {
						border-left: none;
						border-right: 1px solid #BBBBBB;
						padding-left: 0;
						padding-left: 10%;
						padding-right: 10%;
					}

					.three-link {
						border-left: none;
						border-right: 1px solid #BBBBBB;
						padding-left: 5%;
						padding-right: 5%;
					}
				}

				.content {
					width: 100%;
					border-left: 1px solid #BBBBBB;
					padding-bottom: 20rpx;

					box-sizing: border-box;
					overflow: hidden;
					padding: 0 20%;

					.condition-info {
						width: 100%;


					}

					.content-img {

						width: 100%;
						height: 200rpx;
					}
				}

				.three-link {
					width: 100%;
					height: 80rpx;
					box-sizing: border-box;
					border-left: 1px solid #BBBBBB;
					padding: 0 5%;
					display: inline-flex;
					justify-content: center;

					.link-share {

						width: 32%;
						height: 100%;

					}

					.link-comments {

						width: 32%;
						height: 100%;
					}

					.link-zan {

						width: 32%;
						height: 100%;
					}

				}

				.comments {
					width: 100%;
					height: auto;
					border-left: 1px solid #BBBBBB;
					padding-bottom: 20rpx;
					box-sizing: border-box;
					padding: 0 10%;

					.comments-list {
						width: 100%;

						overflow: hidden;

						.comments-avater {
							margin-top: 25rpx;
							float: left;
							margin-right: 20rpx;
						}

						.comments-info {

							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							float: left;

							.comments-name {
								margin: 20rpx 0 0 10rpx;
								height: 70rpx;
								width: 100%;

								display: flex;
								align-items: center;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.comments-mes {
								padding-left: 40rpx;
								box-sizing: border-box;
							}
						}
					}
				}

			}
		}
	}

	.link-icon {
		width: 25%;
		height: 100%;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.link-icon-num {
		width: 65%;
		float: left;
		overflow: hidden;
		height: 100%;
		line-height: 200%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 悬浮球样式 */
	.floating-button {
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
		width: 120rpx;
		height: 120rpx;
		background-color: #2C57F6;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(44, 87, 246, 0.5);
		z-index: 999;
	}
</style>